<template>
	<view class="container">
		<u-image width="100%" height="300rpx" :src="swiper_list.length>0?swiper_list[0].image:''"></u-image>
		<view class="panel">
			<view class="top">
				<u-grid col="2" border>
					<u-grid-item>
						<view class="u-p-40 grid-item">
							<view class="">账户余额(泰铢)</view>
							<view class="u-m-t-30 text-bold u-warning u-font-40">0.00</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="u-p-40 grid-item">
							<view class="">还款余额(泰铢)</view>
							<view class="u-m-t-30 text-bold u-warning u-font-40">0.00</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<block v-if="status==0">
				<view v-if="loans_list.length > 1" class="bg-white u-m-t-20">
					<view class="u-p-30">
						<u-button text="提 款" :color="themeColor.color" @click="status=1"></u-button>
					</view>
				</view>
				
				<view class="card" v-for="(item,index) in loans_list" :key="index" v-if="loans_list.length>0">
					<u-cell title="申请编号"> <text slot="value" class="u-info">{{item.loanid}}</text></u-cell>
					<u-cell title="贷款金额"> <text slot="value" class="u-info">{{item.price}}$</text></u-cell>
					<u-cell title="每月还款"> <text slot="value" class="u-info">{{item.pricemonth}}$</text></u-cell>
					<u-cell title="贷款期限" :border="false"> <text slot="value" class="u-info">{{item.pricetime}}月</text></u-cell>
					<view class="u-p-30" v-if="loans_list.length == 1">
						<u-button text="提 款" :color="themeColor.color" @click="status=1"></u-button>
					</view>
				</view>
				<view v-if="loans_list.length==0" class="u-m-t-30">
					<u-empty text="暂无贷款信息" icon="../../static/empty.png">
						<u-button size="small" :style="{marginTop:10+'px'}" text="去申请" :color="themeColor.color" @click="toDaikuan"></u-button>
					</u-empty>
				</view>
			</block>
			<block v-else>
				<view class="bg-white u-m-t-20 u-p-30">
					<view class="">
						<u-input placeholder="请输入金额" type="number" clearable v-model="input_price"> 
							<template slot="suffix"><text class="u-font-28">泰铢</text></template>
						</u-input>
					</view>
					<view class="u-m-t-20">
						<u-input placeholder="请输入提现码" clearable v-model="input_code"> 
							<template slot="suffix"><text class="u-font-28">提现码</text></template>
						</u-input>
					</view>
					<view class="u-m-t-20 u-font-28 u-error">请与代理联系获取提现码</view>
					<view class="u-m-t-20 u-block__content">
						<view class="u-block__button-item">
							<u-button text="发送" size="normal" :color="themeColor.color" :customStyle="{width:'170px'}" @click="tixian"></u-button>
						</view>
						<view class="u-block__button-item u-m-l-30" v-if="ageService" @click="openBrowser(ageService.siteaddress)">
							<u--image :showLoading="true" :src="ageService.logo" width="45px" height="45px" @click="click"></u--image>
						</view>
						<!-- <view class="u-block__button-item">
							<u-button text="返回" size="normal" :color="themeColor.color" @click="status=0"></u-button>
						</view> -->
					</view>
				</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	var _this;
	import {api_ads,api_loan_index,api_moneyregister} from '../../common/api.js'
	import {mapState} from 'vuex';
	export default {
		components:{},
		computed:{
			...mapState({
				ageService: state => state.app.ageService,
			})
		},
		data() {
			return {
				loans_list:[
					{
						loanid:0,
						price:0,
						pricemonth:0,
						pricetime:0
					},
				],
				swiper_list:[],
				status:0,//0正常，1提款
				input_price:'',
				input_code:'',
			}
		},
		methods:{
			load(option) {
				_this = this;
				this.getAds();
			},
			getAds(){
				let params = {flag:'wallet'};
				api_ads({params:params}).then(res=>{
					_this.swiper_list = res
				})
				
				api_loan_index().then(res=>{
					console.log(111111111111111111);
					console.log(res);
					console.log(111111111111111111);
					if (res.data.length==0) return;
					_this.loans_list = res.data;
				})
			},
			apply(){
				this.status = 1
			},
			toDaikuan(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			openBrowser(str){
				this.$app.openBrowser(str)
			},
			tixian(){
				var _this = this;
				if (_this.input_price === '') return uni.$u.toast('请输入提款金额');
				if (_this.input_code === '') return uni.$u.toast('请输入提现码');
				
				this.$app.showLoading();
				api_moneyregister({
					price:_this.input_price,
					tpassword:_this.input_code
				}).then(res=>{
					console.log(res);
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.panel{
			.top{
				// height: 93px;
				background-color: #fff;
				.u-grid{
					.u-border-right{
						border-color: #EEEEEE !important;
					}
				}
				.grid-item{
					justify-content: center;
					text-align: center;
					display: flex;
					flex-wrap: wrap;
				}
			}
			
			.card{
				margin: 20rpx;
				background-color: #fff;
				border-radius: 12rpx;
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			}
		}
	}
	.bg-black{
		background-color: #fff;
	}
	.u-block__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		display: flex;
	}
	.u-block {
			&__button-item {
				margin: 0 15px 15px 0;
			}
		}
</style>
